<template>
  <div class="user-home">
    <router-view></router-view>
      <el-carousel height="320px">
        <el-carousel-item v-for="item in swiperList" :key="item.id">
          <img :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
    <div class="room-hot">
      <h1>房间推荐</h1>
      <p>探索的终点很远，休息好了再上路</p>
      <div class="room-hot-content"  @click="$router.push('/user/onlineReserve')">
        <RoomCard class="room-card" v-for="item in roomAdviceList" :key="item.roomId" :roomTypeItem="item"></RoomCard>
      </div>
    </div>
  </div>
</template>

<script>
import { getRoomList } from '@/api/room'
import RoomCard from '@/components/user/RoomCard.vue'
export default {
  name: 'UserHome',
  components: {
    RoomCard
  },
  data () {
    return {
      swiperList: [
        {
          id: 1,
          url: 'https://dimg04.c-ctrip.com/images/0202812000ajqcn1g267D_W_1080_808_R5_D.jpg'
        },
        {
          id: 2,
          url: 'https://dimg04.c-ctrip.com/images/1mc4b12000apk5gye17B1_W_1080_808_R5_D.jpg'
        },
        {
          id: 3,
          url: 'https://dimg04.c-ctrip.com/images/1mc3612000akalng11C7C_W_1080_808_R5_D.jpg'
        }
      ],
      roomAdviceList: []
    }
  },
  created () {
    this.getRoomList()
  },
  methods: {
    async getRoomList () {
      this.roomAdviceList = await getRoomList()
      this.roomAdviceList = this.roomAdviceList.filter(item => item.isAdvice)
      console.log(this.roomAdviceList)
    }
  }
}
</script>

<style lang="less" scoped>
.user-home{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.el-carousel {
  // background-color: red;
  img {
    height: 320px;
    width: 100%;
  }
}
.room-hot {
  width: 94%;
  height: 500px;
  text-align: center;
  // border: 1px solid red;
  margin: 0 auto;
  h1 {
    padding: 10px 0;
    color: #67b7fb;
  }
  .room-hot-content {
    display: flex;
    flex-direction: row;
    // justify-content: space-around;
    flex-wrap: wrap;
    .room-card{
      width: 23%;
      margin: 0 10px;
    }
  }
}
</style>
